import { PageContainer } from '@ant-design/pro-layout';
import { history } from 'umi';
import { useState } from 'react';
import { Result } from 'antd';
import PatrolRecord from './PatrolRecord';
import PatrolTrack from './PatrolTrack';

export default () => {
  const [tabKey, setTabKey] = useState<string>('record');
  const [deviceSn] = useState<string>(String(history.location.state || ''));
  return (
    <PageContainer
      header={{
        title: '',
        subTitle: `巡检设备 ${deviceSn || ''} 详情`,
      }}
      tabActiveKey={tabKey}
      tabList={
        deviceSn
          ? [
              { tab: '巡检记录', key: 'record' },
              { tab: '巡检轨迹', key: 'track' },
            ]
          : []
      }
      onTabChange={(activeKey) => {
        setTabKey(activeKey);
      }}
    >
      {!deviceSn && (
        <Result
          title="无目标设备"
          subTitle="请返回『巡检设备』界面选择希望查看的巡检设备，点击「详情」按钮进行查看"
        />
      )}
      {deviceSn && tabKey === 'record' && <PatrolRecord deviceSn={deviceSn} />}
      {deviceSn && tabKey === 'track' && <PatrolTrack deviceSn={deviceSn} />}
    </PageContainer>
  );
};
